import { View, Text, Image } from '@tarojs/components';
import { Component } from 'react';
import Taro from '@tarojs/taro';
import { AtList, AtListItem, AtIcon, AtButton } from 'taro-ui';
import ProductItem from '../component/ProductItem';
import './index.scss';

/**
 * 提交订单
 * @returns
 */
export default class Index extends Component {
  state = {
    shopInfo: {
      name: '北京志兴东路店',
      address: '北京市大兴区亦庄经济开发科...',
      logo: 'https://img.txqn.huohua.cn/material/20224845346bacc3b69-8c07-4b1b-a16d-a62bedf9cda5.jpg',
      brand: '卡西欧',
    },
    productInfo: {
      imageUrl:
        'https://img.txqn.huohua.cn/material/20224845346bacc3b69-8c07-4b1b-a16d-a62bedf9cda5.jpg',
      name: '上门助浴-60至90分钟',
      desc: '助浴+按摩',
      duration: '60分钟',
      payWay: '线上支付',
      price: '0.01',
      id: 4,
    },
  };

  submit = () => {
    Taro.showToast({
      title: '提交成功',
    });
  };

  onSelectUser = (value: number | string) => {
    console.log(value);
  };

  render() {
    const { shopInfo, productInfo } = this.state;
    return (
      <View className="submit-refound-content">
        <View className="order-content">
          <View className="section-block">
            <View className="shop-logo">
              <Image src={shopInfo.logo} />
              <Text>{shopInfo.brand}</Text>
              <AtIcon value="chevron-right" size={20} color="#CCCCCC" />
            </View>
            <ProductItem product={productInfo} />
          </View>
          <View className="section-block">
            <AtList>
              <AtListItem title="售后方式" extraText="仅退款" />
              <AtListItem title="退款金额" className="red-color" extraText="￥0.06" />
              <View className="refound-desc">
                不可修改，最多可退￥0.06(含运费￥0.02)，退款将返还实际支付金额。
              </View>
            </AtList>
          </View>
          <View className="section-block">
            <AtList>
              <AtListItem title="留 言" extraText="填写您的留言" />
            </AtList>
          </View>
        </View>
        <View className="bottom-btn">
          <AtButton onClick={this.submit}>提交</AtButton>
        </View>
      </View>
    );
  }
}
